<div class="panel panel-default panel-widget">
    <div class="panel-body" style="background-color: #fff;padding: 10px ">
        <h4 class="header-dividing" id="minimum-setup">简单配置:datetimepicker1</h4>
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
    	                    <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
            $(function() {
                $('#datetimepicker1').datetimepicker({
                    fontAwesome:true,
                    format:'yyyy-mm-dd hh:ii:ss',
                     autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                }).on('changeDate',function(event){

                });
            });
            </script>
        </div>
        <br/>
        <h4 class="header-dividing" id="minimum-setup">自定义格式:datetimepicker2</h4>
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker2'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
    	                     <span class="glyphicon glyphicon-time"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
            $(function() {
                $('#datetimepicker2').datetimepicker({
                        language:  "zh-CN",
                        weekStart: 1,
                        todayBtn:  1,
                        autoclose: 1,
                        todayHighlight: 1,
                        startView: 1,
                        minView: 0,
                        maxView: 1,
                        forceParse: 0,
                        format: 'hh:ii'
                });
            });
            </script>
        </div>
        <br/>
        <h4 class="header-dividing" id="minimum-setup">禁用日期:datetimepicker3</h4>
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker3'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
        	                     <span class="glyphicon glyphicon-calendar">
                    </span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
            $(function() {
                $('#datetimepicker3').datetimepicker({
                    daysOfWeekDisabled: [0, 6]
                });
            });
            </script>
        </div>
        <br/>
        <h4 class="header-dividing" id="minimum-setup">inline:datetimepicker4</h4>
        <div class="row">
            <div class='col-sm-8'>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-8">
                            <div id="datetimepicker4"></div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
            $(function() {
                $('#datetimepicker4').datetimepicker();
            });
            </script>
        </div>

        <br/>
        <div class="mu-tabbable border-remove">
            <ul class="nav nav-tabs ">
                <li class="active"><a href="#tab_5_1" data-toggle="tab">Javascript</a>
                </li>
                <li><a href="#tab_5_2" data-toggle="tab">Html</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_5_1">
                <pre class="prettyprint">
$(function() {
    $('#datetimepicker1').datetimepicker({
        fontAwesome:true,
        format:'yyyy-mm-dd hh:ii:ss',
         autoclose: true,
        todayBtn: true,
        pickerPosition: "bottom-left"
    });

    $('#datetimepicker2').datetimepicker({
            language:  "zh-CN",
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 1,
            minView: 0,
            maxView: 1,
            forceParse: 0,
            format: 'hh:ii'
    });

    $('#datetimepicker3').datetimepicker({
        daysOfWeekDisabled: [0, 6]
    });

    $('#datetimepicker4').datetimepicker();
});
                </pre>
                </div>
                <div class="tab-pane" id="tab_5_2">
                <pre class="prettyprint">
&lt;div class="form-group"&gt;
    &lt;div class='input-group date' id='datetimepicker1'&gt;
        &lt;input type='text' class="form-control" /&gt;
        &lt;span class="input-group-addon"&gt;
            &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
 &lt;div class="form-group"&gt;
    &lt;div class='input-group date' id='datetimepicker2'&gt;
        &lt;input type='text' class="form-control" /&gt;
        &lt;span class="input-group-addon"&gt;
             &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
 &lt;div class="form-group"&gt;
    &lt;div class='input-group date' id='datetimepicker3'&gt;
        &lt;input type='text' class="form-control" /&gt;
        &lt;span class="input-group-addon"&gt;
                 &lt;span class="glyphicon glyphicon-calendar"&gt;
    &lt;/span&gt;
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
 &lt;div class="form-group"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-8"&gt;
            &lt;div id="datetimepicker4"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
                </pre>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
window.prettyPrint();
</script>
